<template>
	<image src="../../static/logo.jpg" mode="widthFix" class="login-image"></image>
	<view class="login-part" :style="{'bottom':windowHeight*2/5+'px'}">
		<checkbox-group @change="checkboxChange" style="width: 550rpx; text-align: center;margin-left: 100rpx;">
			<checkbox style="transform:scale(0.9);" :checked="data.state" ><text style="margin-left: 10rpx;">点击此处同意<text style="color: #9BCDD2; margin-left: 5rpx;">用户协议</text>和<text style="color: #9BCDD2; margin-left: 5rpx;">隐私政策</text></text></checkbox>
		</checkbox-group>
		<view class="login-wx" @tap="wxLogin">
			<image src="@/static/login/wx-login.png" mode="aspectFit"></image>
			<view class="login-wx-text">
				微信登录
			</view>
		</view>
	</view>
	<u-popup :show="data.callPop" mode="center" :round="20">
		<view class="login-popup">
			<view class="login-popup-title">提示</view>
			<view class="login-popup-text">请先阅读并同意<text style="color: #9BCDD2; margin-left: 5rpx;">用户协议</text>和<text style="color: #9BCDD2; margin-left: 5rpx;">隐私政策</text></view>
			<view class="login-popup-btn-container">
				<view class="login-popup-btn login-popup-left-btn" @tap="loginReturn(0)">
					取消
				</view>
				<view class="login-popup-btn login-popup-right-btn" @tap="loginReturn(1)">
					同意
				</view>
			</view>
		</view>
	</u-popup>
	
</template>

<script>
	import {reactive} from 'vue'
	import {useStore} from 'vuex'
	import global from '../../config/global.js'
	export default{
		name:'login',
		setup(){
			let data = reactive({
				state:false,
				callPop:false
			})
			let windowHeight = uni.getSystemInfoSync()['windowHeight']
			let store = useStore()
			
			function checkboxChange(e) {
				data.state = !data.state;
				// console.log(data.state);
			}
			
			function wxLogin(){
				// console.log(data)
				if(!data.state){
					data.callPop = true
				}else{
					wxLoginFunc();
				}
			}
			
			function loginReturn(i){
				data.callPop = false;
				if(i==1){
					data.state = true;
					wxLoginFunc();
				}
			}
			
			// 微信登录主体
			function wxLoginFunc(){
				uni.login({
					provider:'weixin',
					success: (res) => {
						console.log('res-login',res)
						if(res.errMsg == 'login:ok'){
							uni.request({
								url:`${global.BASE_URL}/user/login/${res.code}`,
								method:"GET",
								success: (res) => {
									if(res.data.code){
										uni.setStorageSync('localtoken',res.data.data.token)
										uni.setStorageSync('role',res.data.data.role)
										uni.navigateBack()
										store.dispatch('WEBSOCKET_INIT','wss://www.huashizhaoxi.icu:81/websocket/'+res.data.data.token)
									}else{
										uni.showModal({
											title:'登录失败',
											content:res.data.msg,
											showCancel: false,
											confirmText: '确定'
										})
									}
								},
								fail: (err) => {
									console.log(err)
								}
							})
						}
						
					}
				})
			}
			
			
			return {
				// 数据
				windowHeight,
				data,
				
				// 方法
				wxLogin,
				loginReturn,
				checkboxChange
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-image{
		width: 400rpx;
		margin-left: 160rpx;
		margin-top: 50rpx;
	}
	
	.login-part{
		position: fixed;
		left: 0;
		
		& .login-wx{
			width: 200rpx;
			margin: 30rpx 125rpx;
			padding: 0 150rpx;
			border-radius: 100rpx;
			height: rpx;
			background-color: #65C239;
			color: white;
			display: flex;
			
			& image{
				width: 50rpx;
				height: 50rpx;
				margin-top: 20rpx;
			}
			
			& .login-wx-text{
				width: 150rpx;
				text-align: center;
				height: 85rpx;
				line-height: 85rpx;
				font-size: 33rpx;
			}
			
		}
	}

	.login-popup{
		width:650rpx;
		height: 260rpx;
		padding: 20rpx 0rpx;
		position: relative;
		
		& .login-popup-title{
			margin: 0 25rpx;
			color: #DE6868;
			width: 600rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 40rpx;
		}
		
		& .login-popup-text{
			margin: 0 25rpx;
			margin-top: 20rpx;
			width: 600rpx;
			text-align: center;
			font-size: 24rpx;
		}
		
		& .login-popup-btn-container{
			position: absolute;
			bottom: 2rpx;
			display: flex;
			width: 650rpx;
			height: 80rpx;
			
			& .login-popup-btn{
				width: 650rpx;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				border-top: 2rpx solid #cccccc;
				font-size: 34rpx;
			}
			
			& .login-popup-left-btn{
				border-right: 1rpx solid #cccccc;
				color: #DE6868;
			}
			
			& .login-popup-right-btn{
				border-left: 1rpx solid #cccccc;
				color: #9BCDD2;
			}
		}
	}
</style>

<!-- <template>
	<image src="../../static/logo.jpg" mode="widthFix" class="login-image"></image>
	<view class="login-container" v-if="!flag">
		<view class="login-box">
			<view class="login-input-container">
				<input class="login-user-input" type="text" placeholder="请输入用户名/手机号/邮箱" v-model="data.account"/>
				<view class="login-pass-container">
					<input class="login-pass-input" :password="data.showPassword" placeholder="请输入密码" v-model="data.password"/>
					<image class="login-pass-show" mode="widthFix" src="../../static/login/show.png" @click="showPass"></image>
				</view>
				
				<checkbox-group @change="checkboxChange">
					<checkbox style="transform:scale(0.8);" :checked="data.state" ><text style="margin-left: 10rpx;">点击此处同意<text style="color: #9BCDD2; margin-left: 5rpx;">用户协议</text></text></checkbox>
				</checkbox-group>
				
				<button class="login-btn" @click="accountLogin">登 录</button>
				<view class="login-option-container">
					<view class="login-forget">忘记密码</view>
					<view class="login-register-go" @tap="changeFlag">立即注册</view>
				</view>
			</view>
			<view class="login-else">其他方式登录</view>
			<view class="login-else-container">
				<image class="login-else-btn" src="../../static/login/WX.png" mode="widthFix" @tap="wxLogin"></image>
				<image class="login-else-btn" src="../../static/login/QQ.png" mode="widthFix" @tap="qqLogin"></image>
			</view>
		</view>
	</view>
	<view class="login-container" v-if="flag">
		<view class="login-box">
			<view class="login-input-container">
				<input class="login-user-input" type="text" placeholder="请输入用户名" v-model="data.account"/>
				<view class="login-pass-container">
					<input class="login-pass-input" :password="data.showPassword" placeholder="请输入密码" v-model="data.password"/>
					<image class="login-pass-show" mode="widthFix" src="../../static/login/show.png" @click="showPass"></image>
				</view>
				<checkbox-group @change="checkboxChange">
					<checkbox style="transform:scale(0.8);" :checked="data.state" ><text style="margin-left: 10rpx;">点击此处同意<text style="color: #9BCDD2; margin-left: 5rpx;">用户协议</text></text></checkbox>
				</checkbox-group>
				
				<button class="login-btn" @click="accountRegister">注 册</button>
				<view class="login-option-container2">
					<view class="login-register-go2" @tap="changeFlag">立即登录</view>
				</view>
			</view>
			<view class="login-else">其他方式登录</view>
			<view class="login-else-container">
				<image class="login-else-btn" src="../../static/login/WX.png" mode="widthFix" @tap="wxLogin"></image>
				<image class="login-else-btn" src="../../static/login/QQ.png" mode="widthFix" @tap="qqLogin"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import axios from 'axios'
	import {ref,reactive} from 'vue'
	import global from '@/config/global.js'
	import md5 from 'js-md5'
	export default {
		name: "login",
		setup() {
			// console.log(global)
			let data = reactive({
				account:"",
				password:"",
				state:false,
				showPassword:true
			})
			let flag = ref(false)
			const changeFlag =(v)=>{
				flag.value = !flag.value;
				data.account = "";
				data.password = "";
				data.state = false;
				data.showPassword = true
			}

			function checkboxChange(e) {
				data.state = !data.state;
				// console.log(data.state);
			}

			function accountLogin(){
				if(!data.account||!data.password) {
					uni.showModal({
						title: '登录错误',
						content: '账户或密码为空',
						showCancel: false,
						confirmText: '确定'
					});
					return;
				}
				if(!data.state){
					uni.showModal({
						title: '登录错误',
						content: '尚未同意用户协议',
						showCancel: false,
						confirmText: '确定'
					});
					return;
				}
				let dataStr = md5(data.password)
				uni.request({
					method:'POST',
					url:global.BASE_URL+'/user/login',
					data:{
						username:data.account,
						password: dataStr
					},
					success:(res)=>{
						// console.log(res);
						if(res.data.code){
							uni.setStorageSync('localtoken',res.data.data.token)
							uni.setStorageSync('role',res.data.data.role)
							uni.navigateBack()
						}else{
							uni.showModal({
								title:'登录失败',
								content:res.data.msg,
								showCancel: false,
								confirmText: '确定'
							})
						}
						
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
			
			function accountRegister(){
				if(!data.account||!data.password) {
					uni.showModal({
						title: '注册错误',
						content: '账户或密码为空',
						showCancel: false,
						confirmText: '确定'
					});
					return;
				}
				if(!data.state){
					uni.showModal({
						title: '注册错误',
						content: '尚未同意用户协议',
						showCancel: false,
						confirmText: '确定'
					});
					return;
				}
				let dataStr = md5(data.password)
				uni.request({
					method:'POST',
					url:global.BASE_URL+'/user/register',
					data:{
						username:data.account,
						password:dataStr
					},
					success:(res)=>{
						// console.log(res);
						if(res.data.code){
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2]; // 上一页
							uni.setStorageSync('localtoken',res.data.data.token)
							uni.setStorageSync('role',res.data.data.role)
							uni.reLaunch({
								url:beforePage.$page.fullPath
							})
						}else{
							uni.showModal({
								title:'注册失败',
								content:res.data.msg,
								showCancel: false,
								confirmText: '确定'
							})
						}
						
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}

			function showPass(){
				data.showPassword = !data.showPassword;
			}
			
			function wxLogin(){
				uni.login({
					provider:'weixin',
					success: (res) => {
						console.log('res-login',res)
					}
				})
			}
			
			function qqLogin(){
				uni.showToast({
					icon:"error",
					title:"暂未开放",
					duration: 700
				})
			}

			return {
				data,
				changeFlag,
				flag,
				accountLogin,
				accountRegister,
				checkboxChange,
				showPass,
				qqLogin,
				wxLogin
			}
		}
	}
</script>

<style scoped>
	page {
		width: 100%;
		height: 100%;
		background: transparent;
	}
	
	.login-image{
		width: 400rpx;
		margin-left: 175rpx;
		margin-top: 20rpx;
	}

	.login-container {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		/* display: flex; */
		/* #endif */
		justify-content: center;
		background: transparent;
	}

	/* .login-btn-container{
		position: absolute;
		bottom: 0;
		width: 100%;
		background-color: white;
	} */	
	.login-input-container{
		width: 750rpx;
		text-align: center;
	}
	
	.login-box{
		width: 750rpx;
		height: 750rpx;
		position:relative;
		transform: translateY(60%);
	}
	
	.login-user-input{
		background: url(@/static/login/username.png) no-repeat 10rpx center;
		background-size: 50rpx;
		padding: 5rpx 80rpx; /*输入内容左右边距控制*/
		width: 450rpx;
		margin:40rpx 70rpx;
		height: 80rpx;
		font-size: 37rpx;
		border-bottom: #515151 solid 2rpx;
		color: #515151;
		text-align: left;
	}
	
	.login-pass-container{
		background: url(@/static/login/password.png) no-repeat 10rpx center;
		background-size: 50rpx;
		position: relative;
		width: 450rpx;
		margin:40rpx 70rpx;
		height: 80rpx;
		padding: 5rpx 80rpx; /*输入内容左右边距控制*/
		display: flex;
		border-bottom: #515151 solid 2rpx;
	}
	
	.login-pass-input{
		height: 80rpx;
		font-size: 37rpx;
		width: 380rpx;
		color: #515151;
		text-align: left;
	}
	
	
	
	.login-pass-show{
		width: 60rpx;
		position: absolute;
		right: 0rpx;
		margin-top: 10rpx;
	}
	
	.login-btn {
		width: 550rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 35rpx;
		background-color: #9BCDD2;
		color: white;
		border-radius: 100rpx;
		margin-top: 30rpx;
	}
	
	.login-option-container{
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
		justify-content: center;
		height: 50rpx;
		color: #515151;
	}
	
	.login-option-container2{
		width: 550rpx;
		height: 50rpx;
		margin-left: 100rpx;
		color: #515151;
		justify-content: right;
	}
	
	.login-register-go2{
		color: #9BCDD2;
		text-align: right;
		margin:10rpx 30rpx;
	}
	
	.login-forget{
		color: #515151;
		/* border-bottom: #515151 solid 2rpx; */
		margin:10rpx 120rpx;
	}
	
	.login-register-go{
		display: inline;
		color: #9BCDD2;
		/* border-bottom: #515151 solid 2rpx; */
		margin:10rpx 120rpx;
	}
	
	.login-else{
		width: 600rpx;
		font-size: 28rpx;
		text-align: center;
		margin-left: 75rpx;
		margin-top: 60rpx;
		margin-bottom: 20rpx;
		padding: 5rpx 0;
		border-bottom: #515151 solid 2rpx ;
	}
	
	.login-else-container{
		width: 400rpx;
		margin-left: 175rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
		justify-content: center;
	}
	
	.login-else-btn{
		width: 80rpx;
		margin:5rpx 20rpx;
	}
</style> -->